<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湖大·云音乐</title>
     <!-- 引入外部的样式文件 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入fontawsome字体图标库 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="column">
        <img src="img/demo.jpg" id="musicImg" alt="专辑封面">
        <header class="center">
            <span id="music-name">可爱的涛涛</span>
        </header>
       <section>
           <!-- <div class="item row">
               <div class="item-icon">
                   <i class="fa fa-music fa-1x"></i>
               </div>
               <div class="item-name">歌曲名</div>
               <div class="item-size">大小</div>
           </div> -->   
       </section>
       <!-- 歌曲播放进度以及控制区域 -->
       <footer>
           <!-- 进度条区域 -->
           <div class="progress-box">
               <div class="progress-bg">
                   <div class="progress">
                       <div class="seekbar"></div>
                   </div>
               </div>
            </div>
           <!-- 时间显示 -->
           <div class="time row">
               <div class="time-now">05:20</div>
               <div class="time-duration">13:14</div>
           </div>
           <!-- 播放控制按钮 -->
           <div class="btn-group row">
               <button class="btn-play-type">
                    <i class="fa fa-list fa-1x"></i>
               </button>
               <button class="btn-play-prev">
                    <i class="fa fa-fast-backward fa-2x"></i>
               </button>
               <button class="btn-play-pause">
                <i class="fa fa-play-circle-o fa-4x"></i>
               </button>
               <button class="btn-play-next">
                    <i class="fa fa-fast-forward fa-2x"></i>
               </button>
               <button class="btn-play-mute">
                    <i class="fa fa-volume-up"></i>
               </button>
           </div>
       </footer>
    </div>
    <!-- 引入JS脚本文件 -->
    <script src="js/index.js"></script>
</body>
</html>